<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			body{
				background-color: #fff;
			}
			.header{
				width: 100%;
				height: 90px;
				margin-top: 48px;
				
			}
			.header>.center{
				width: 1069px;
				height: 90px;
				box-sizing: border-box;
				/*border: 1px solid;*/
				/*background-color: pink;*/
				margin: 0 auto;
				/*background:url(../img/logo.jpg) no-repeat left;*/
			}
			.header>.center>.left{
				display: block;
				float: left;
				width: 270px;
				height: 90px;
				background: url(../img/logo.jpg) no-repeat;
			}
			.header>.center>.right{
				width: 799px;
				height: 90px;
				float: right;
				/*background-color: skyblue;*/
			}
			.header>.center>.right>.zuo{
				width: 340px;
				height: 90px;
				/*background-color: pink;*/
				float: left;
				/*color: #9c9c9b;*/
				box-sizing: border-box;
				font-size: 25px;
				font-weight: 600;
				line-height: 90px;
				padding-left:20px ;
			}
			.header>.center>.right>.you{
				width: 459px;
				height: 90px;
				/*background-color: yellow;*/
				float: right;
				background: url(../img/rs001.jpg) no-repeat;
			}
			.main{
				width: 100%;
				height: 470px;
				margin-top: 50px;
			}
			.main>.center{
				width: 1069px;
				height: 470px;
				/*background-color: skyblue;*/
				margin: 0 auto;
			}
			.main>.center>.left{
				display: block;
				float: left;
				width: 564px;
				height: 470px;
				background: url(../img/rs002.jpg) no-repeat;
			}
			.main>.center>.right{
				width: 505px;
				height: 470px;
				float: right;
				box-sizing: border-box;
				/*border: 1px solid #ccc;*/
				/*background-color: pink;*/
				background: url(../img/rs003.jpg) no-repeat right;
				position: relative;
			}
			.main>.center>.right>.zuo{
				width: 478px;
				height: 470px;
				box-sizing: border-box;
				border: 1px solid #ccc;
				overflow: hidden;
			}
			.main>.center>.right>.zuo>.top{
				height: 17px;
				margin-top: 59px;
				line-height: 17px;
				font-size: 14px;
			}
			.main>.center>.right>.zuo>.top>a{
				color: #f7679f;
				margin-left: 372px;
			}
			.main>.center>.right>.zuo>.middle{
				width: 478px;
				height: 189px;
				/*background-color: pink;*/
			}
			.main>.center>.right>.zuo>.middle>.zhong{
				width: 355px;
				height: 189px;
				margin: 0 auto;
				/*background-color: skyblue;*/
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
			.main>.center>.right>.zuo>.middle>.zhong>div{
				display: block;
				width: 100%;
				height: 40px;
				box-sizing: border-box;
				border: 1px solid #ccc;
				outline: none;
				border-radius: 5px;
			}
			.main>.center>.right>.zuo>.middle>.zhong>div:hover{
				border: 1px solid orange;
			}
			.main>.center>.right>.zuo>.middle>.zhong>div>input{
				width: 300px;
				height: 38px;
				border: none;
				outline: none;
				margin-left: 20px;
			}
			.main>.center>.right>.zuo>.bottom{
				width: 478px;
				height: 100px;
				/*background-color: skyblue;*/
				/*margin: 0 auto;*/
			}
			.main>.center>.right>.zuo>.bottom>.center{
				width: 300px;
				height: 100px;
				/*background-color: pink;*/
				margin-left: 61px;
			}
			.main>.center>.right>.zuo>.bottom>.center>.top{
				height: 45px;
				width: 100%;
				/*background-color: yellow;*/
				overflow: hidden;
				position: relative;
				/*background: url(../img/rs005.jpg) no-repeat 270px 6px;*/
				
			}
			.main>.center>.right>.zuo>.bottom>.center>.top>.suo{
				width: 29px;
				height: 30px;
				background: url(../img/rs005.jpg) no-repeat;
				position: absolute;
				left: 270px;
				top: 6px;
				cursor: pointer;
				
			}
			.main>.center>.right>.zuo>.bottom>.center>.top>.hua{
				width: 262px;
				height: 32px;
				box-sizing: border-box;
				border: 1px solid #e9e3dd;
				background-color: #ece4dd;
				border-radius: 16px;
				margin-top: 6px;
				font-size: 12px;
				line-height: 32px;
				padding-left: 75px;
				/*position: relative;*/
			}
			.main>.center>.right>.zuo>.bottom>.center>.top>.circle{
				width: 40px;
				height: 40px;
				border-radius: 50%;
				box-sizing: border-box;
				border: 1px solid #ccc;
				position: absolute;
				left:5px;
				top: 0;
				bottom: 0;
				margin: 0 auto;
				margin-top: 2px;
				background: url(../img/rs004.jpg) no-repeat center;
				background-color: #fff;
				cursor: pointer;
			}
			.main>.center>.right>.btn{
				width: 141px;
				height: 40px;
				background: url(../img/rs006.jpg) no-repeat;
				position: absolute;
				left: 66px;
				top: 328px;
				cursor: pointer;
			}
			footer{
				width: 100%;
				height: 109px;
				
			}
			footer>.center{
				width: 1070px;
				height: 109px;
				margin: 0 auto;
				/*background-color: skyblue;*/
				overflow: hidden;
			}
			footer>.center>nav{
				width: 1070px;
				height: 20px;
				/*background-color: yellow;*/
				margin-top: 64px;
			}
			footer>.center>nav>ul{
				width: 374px;
				height: 20px;
				/*background-color: pink;*/
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
			}
			footer>.center>nav>ul>li{
				flex: 1;
				/*border-right: 1px solid;*/
				height: 20px;
				line-height: 20px;
				background: url(../img/rs007.jpg) no-repeat 60px 2px;
			}
			footer>.center>nav>ul>li:last-child{
				background: none;
			}
			footer>.center>nav>ul>li>a{
				font-size: 12px;
				color: #000;
			}
			
			footer>.center>nav>ul>li>a:hover{
				color: #ee1475;
			}
			footer>.center>.bottom{
				width: 1070px;
				height: 25px;
				/*background-color: skyblue;*/
				font-size: 12px;
				text-align: center;
				line-height: 25px;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="center">
				<a class="left" href="../index.html">
					
				</a>
				<div class="right">
					<div class="zuo">
						30秒免费注册
					</div>
					<div class="you">
						
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="center">
				<a class="left" href="register.html">
					
				</a>
				<div class="right">
					<div class="zuo">
						<div class="top">
							<a href="login.html">登录&gt;&gt;</a>
						</div>
						<div class="middle">
							<div class="zhong">
								<div>
									<input placeholder="请输入用户名">
								</div>
								<div>
									<input placeholder="请输入密码">
								</div>
								<div>
									<input placeholder="请再次输入密码">
								</div>
							</div>
						</div>
						<div class="bottom">
							<div class="center">
								<div class="top">
									<div class="hua">
										按住左边滑块，拖动完成上方拼图
									</div>
									<div class="circle">
										
									</div>
									<div class="suo">
										
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="btn">
						
					</div>
				</div>
			</div>
		</div>
		<footer>
			<div class="center">
				<nav>
					<ul>
						<li><a href="#">正品承诺</a></li>
						<li><a href="#">购物流程</a></li>
						<li><a href="#">售后服务</a></li>
						<li><a href="#">帮助中心</a></li>
						<li><a href="#">我的订单</a></li>
					</ul>
				</nav>
				<div class="bottom">
					Copyright©2006-2019  妆炫化妆品商城 版权所有 渝ICP备14010265号-9
				</div>
			</div>
		</footer>
	</body>
</html>
